import 'package:flutter/material.dart';
import 'package:flutter_app/models/character.dart';
import 'package:flutter_app/pages/character_detail_screen.dart';

class CharacterWidget extends StatelessWidget {
  final Character  currentCharacter ;
  final PageController pageController;
  final int currentPage;

  const CharacterWidget({Key key,
    @required this.currentCharacter,
    this.pageController,
    this.currentPage}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    final screenWidth = MediaQuery.of(context).size.width;
    return InkWell(
      onTap: () {
        /*
        Navigator.of(context).push(MaterialPageRoute(builder: (context){
          return CharacterDetailScreen();
        }));
        */
        Navigator.push(
            context, PageRouteBuilder(
            transitionDuration: Duration(milliseconds: 230),
            pageBuilder: (context, _, __) {
              return CharacterDetailScreen(character:currentCharacter,);
            }));
      },
      child: AnimatedBuilder(
        animation: pageController,
        builder: (context,child){
          double value = 1;
          if(pageController.position.haveDimensions){
            value = pageController.page- currentPage;
            value = (1-(value.abs()*0.6)).clamp(0.0, 1.0);
            //print('pageController.page=${pageController.page},currentPage=${currentPage}'
            //    '(1-(value.abs()*0.6)).clamp(0.0, 1.0)=${(1-(value.abs()*0.6)).clamp(0.0, 1.0)}');
          }
          return Stack(
            children: [
              Align(
                alignment: Alignment.bottomCenter,
                child: ClipPath(
                  clipper: MyCustomClipper(),
                  child: Hero(
                    tag:'background-${currentCharacter.name}',
                    child: Container(
                      padding: EdgeInsets.only(left: screenWidth * 0.5),
                      height: screenHeight * 0.55 ,
                      width: screenWidth * 0.9 ,
                      decoration: BoxDecoration(
                          gradient: LinearGradient(
                              begin: Alignment.topRight,
                              end: Alignment.bottomLeft,
                              colors: [
                                currentCharacter.colors[0],
                                currentCharacter.colors[1]
                              ])),
                    ),
                  ),
                ),
              ),
              Align(
                alignment: Alignment(0, -1.1),
                child: Hero(
                  tag: 'image-${currentCharacter.name}',
                  child: Image.asset(
                    currentCharacter.imagePath,
                    height: screenHeight * 0.55*value,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 45.0, bottom: 10),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Hero(
                      tag: 'name-${currentCharacter.name}',
                      child: Material(
                        color: Colors.transparent,
                        child: Container(
                          child: Text(
                            currentCharacter.name,
                            style: Theme.of(context).textTheme.headline,
                          ),
                        ),
                      ),
                    ),
                    Text(
                      'Tap to Read more',
                      style: Theme.of(context).textTheme.subhead,
                    )
                  ],
                ),
              )
            ],
          );
        },
      ),
    );
  }
}

class MyCustomClipper extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    Path clippedPath = Path();
    double curveDistance = 40;

    clippedPath.moveTo(0, size.height * 0.4);
    clippedPath.lineTo(0, size.height - curveDistance);
    clippedPath.quadraticBezierTo(
        1, size.height - 1, 0 + curveDistance, size.height);
    clippedPath.lineTo(size.width - curveDistance, size.height);
    clippedPath.quadraticBezierTo(size.width + 1, size.height - 1, size.width,
        size.height - curveDistance);
    clippedPath.lineTo(size.width, 0 + curveDistance);
    clippedPath.quadraticBezierTo(size.width - 1, 0,
        size.width - curveDistance - 5, 0 + curveDistance / 3);
    clippedPath.lineTo(curveDistance, size.height * 0.29);
    clippedPath.quadraticBezierTo(
        1, (size.height * 0.30) + 10, 0, size.height * 0.4);
    return clippedPath;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) => true;
}
